const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  // 服务器配置 （反向代理配置）
  devServer: {
    host: 'localhost',
    port: 3000,
    open: true,
    proxy: {
      // 开发时所有的请求 必须以 /api开头 （不能加源）
      '/api': {
        // 代理的目标服务器
        target: 'https://www.fastmock.site/mock/2fffb10607d962fe159da85d0dcd9258',
        // 请求时是否切换源
        changeOrigin: true,
        // 路径重写
        pathRewrite: {
          // ^/api所有请求地址 开头/api
          '^/api': '/api'
          /*
            反向代理 必须要有一个 请求前缀，才能触发，比如 上述反向 必须 以/api开头 触发反向代理
            问题？
              大部分前后端分离 接口 有请求前缀 /api 如果 有的接口没有请求前缀
              就需要将 请求中开始 /api 发请求去掉 不然会产生404
              http://xxx.com/itemLists 真实 后端接口完整路径

              配置 /api反向代理后真实发出去的地址时
              target + /api重写后的值 + 路径

             axios发请求地址这样写 http://xxx.com/itemLists
          */
        }
      }
    }
  },
  lintOnSave: false,
  // 路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set('_assets', path.join(__dirname, 'src/assets'))
      .set('_components', path.join(__dirname, 'src/components'))
      .set('_api', path.join(__dirname, 'src/api'))
      .set('_utils', path.join(__dirname, 'src/utils'))
      .set('_views', path.join(__dirname, 'src/views'))
  }
})
